<template>
	<div id="app">
		<div class="header">
			<h1>🎨 AI漫画生成器</h1>
			<p>输入文本内容，一键生成专属漫画</p>
		</div>

		<div class="main-container">
			<!-- 左侧输入面板 -->
			<div class="input-panel">
				<div class="text-input">
					<el-input v-model="inputText" type="textarea" :rows="15" placeholder="请输入要转换成漫画的文本内容..."
						resize="none"></el-input>
				</div>

				<el-button type="primary" class="generate-btn" @click="generateComic" :loading="generating"
					:disabled="!inputText.trim()">
					{{ generating ? '生成中...' : '生成漫画' }}
				</el-button>

				<div class="example-text">
					<h4>📝 示例文本：</h4>
					<p>早晨的阳光洒进房间，小明揉了揉眼睛醒来。今天是他第一次上学的日子，既紧张又兴奋。他快速穿上新校服，背上书包，妈妈已经在楼下准备早餐了。"要迟到了！"小明喊着跑下楼...</p>
				</div>
			</div>

			<!-- 右侧漫画浏览面板 -->
			<div class="comic-panel">
				<div class="reader-container">
					<div class="comic-image-container">
						<template v-if="generating">
							<div class="loading">
								<div class="loading-icon">🎨</div>
								<p>AI正在创作漫画中，请稍候...</p>
								<el-progress :percentage="progress"
									style="width: 200px; margin-top: 20px;"></el-progress>
							</div>
						</template>
						<template v-else-if="comicPages.length > 0">
							<img :src="comicPages[currentPage - 1]" class="comic-image" />
						</template>
						<template v-else>
							<div class="loading">
								<div class="loading-icon">📖</div>
								<p>请输入文本内容并点击"生成漫画"</p>
							</div>
						</template>
					</div>
					<div class="control-panel" v-if="count > 0">
						<el-button :icon="ArrowLeft" @click="prevPage" :disabled="currentPage <= 1">
							上一页
						</el-button>

						<div class="page-info">
							第 {{ currentPage }} / {{ count }} 页
						</div>

						<el-button :icon="ArrowRight" @click="nextPage" :disabled="currentPage >= count">
							下一页
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		login
	} from '@/axios/api.js'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		User,
		Lock
	} from '@element-plus/icons-vue'
	import {
		ElMessage
	} from 'element-plus';
	import {
		useLoginStore
	} from '@/store/index.js'
	import {
		useFetch
	} from '@/store/fetch.js'
	import {
		ArrowLeft,
		ArrowRight
	} from '@element-plus/icons-vue'
	const inputText = ref('');
	const generating = ref(false);
	const progress = ref(0);
	const currentPage = ref(1);
	const comicPages = ref([]);
	const count = ref(0)

	const {
		execute: submitExecute,
		error: submitError,
		isLoading: isSubmitLoading
	} = useFetch("/api/generate", {
		method: 'POST',
		immediate: false
	})

	const {
		data: nextPageData,
		error: nextPageError,
		execute: fetchNextPage
	} = useFetch('/api/nextPage', {
		method: 'POST',
		immediate: false // 不立即执行
	})

	// 模拟漫画图片URL（实际使用时替换为真实的图片URL）
	const mockComicImages = [
		'https://ark-content-generation-v2-cn-beijing.tos-cn-beijing.volces.com/doubao-seedream-4-0/021761199506970dca48abe1b98965817cc24e2f18c9033a6fb29_0.jpeg?X-Tos-Algorithm=TOS4-HMAC-SHA256&X-Tos-Credential=AKLTYWJkZTExNjA1ZDUyNDc3YzhjNTM5OGIyNjBhNDcyOTQ%2F20251023%2Fcn-beijing%2Ftos%2Frequest&X-Tos-Date=20251023T060530Z&X-Tos-Expires=86400&X-Tos-Signature=02c1a342a044a84fa61b1469f732f9bd6ef8bdef9654de28d48527a30b52973a&X-Tos-SignedHeaders=host',
		'https://via.placeholder.com/800x600/67c23a/fff?text=漫画第2页',
		'https://via.placeholder.com/800x600/e6a23c/fff?text=漫画第3页',
		'https://via.placeholder.com/800x600/f56c6c/fff?text=漫画第4页'
	];

	const generateComic = async () => {
		if (!inputText.value.trim()) {
			ElMessage.warning('请输入文本内容');
			return;
		}

		generating.value = true;
		progress.value = 0;
		comicPages.value = [];
		currentPage.value = 1;
		count.value = 0;

		try {

			// 使用整数进度
			const progressTimer = setInterval(() => {
				progress.value = Math.floor(progress.value + 1); // 确保是整数
				if (progress.value >= 99) {
					progress.value = 99;
				}
			}, 1000);

			// 执行请求
			const result = await submitExecute({
				data: {
					content: inputText.value
				}
			});
			// 请求完成，立即设置进度为100%
			clearInterval(progressTimer);
			progress.value = 100;

			// 处理返回结果
			if (result && result.data) {
				comicPages.value = result.data.data.urlList;
				count.value = result.data.data.count;
				ElMessage.success('漫画生成成功！');
			} else {
				// 如果没有返回数据，使用模拟数据
				comicPages.value = mockComicImages;
				ElMessage.success('漫画生成成功！');
			}

		} catch (error) {
			// 出错时清除进度条
			if (progressTimer) clearInterval(progressTimer);

			ElMessage.error('生成失败: ' + (error.message || '未知错误'));
			// 失败时使用模拟数据
			comicPages.value = mockComicImages;
		} finally {
			generating.value = false;

			// 延迟重置进度条，让用户看到100%完成
			setTimeout(() => {
				progress.value = 0;
			}, 1000);
		}

	};

	const prevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
		}
	};

	const nextPage = async () => {
		// 执行请求
		const result = await fetchNextPage()

		if (result && result.data) {
			comicPages.value = result.data.data;
		}
		// 翻页逻辑
		if (currentPage.value < comicPages.value.length) {
			currentPage.value++;
		} else {
			ElMessage.success("下一页漫画加载中，请稍等")
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		font-family: "Microsoft YaHei", sans-serif;
		background-color: #f5f7fa;
		height: 100vh;
		overflow: hidden;
	}

	#app {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 20px;
		text-align: center;
	}

	.header h1 {
		font-size: 28px;
		margin-bottom: 10px;
	}

	.header p {
		opacity: 0.9;
	}

	.main-container {
		display: flex;
		flex: 1;
		overflow: hidden;
	}

	.input-panel {
		width: 400px;
		background: white;
		padding: 20px;
		border-right: 1px solid #e6e6e6;
		display: flex;
		flex-direction: column;
	}

	.comic-panel {
		flex: 1;
		background: #f8f9fa;
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.text-input {
		flex: 1;
		margin-bottom: 20px;
	}

	.generate-btn {
		margin-top: 10px;
	}

	.reader-container {
		flex: 1;
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.comic-image-container {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}

	.comic-image {
		width: 500px;
		height: 666px;
		/* max-width: 100%;
		max-height: 100%; */
		object-fit: contain;
		border-radius: 4px;
	}

	.control-panel {
		padding: 20px;
		border-top: 1px solid #e6e6e6;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}

	.page-info {
		font-size: 16px;
		color: #606266;
		min-width: 100px;
		text-align: center;
	}

	.loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #909399;
	}

	.loading-icon {
		font-size: 48px;
		margin-bottom: 10px;
	}

	.example-text {
		margin-top: 20px;
		padding: 15px;
		background: #f0f2f5;
		border-radius: 4px;
		font-size: 14px;
		color: #606266;
	}

	.example-text h4 {
		margin-bottom: 8px;
		color: #409eff;
	}
</style>